<template>
  <div class="container">
    <div class="m-b-20">
      <el-select v-model="selectedType" placeholder="请选择类型" style="width: 200px; margin-right: 20px">
        <el-option v-for="item in typeList" :key="item" :label="item" :value="item" />
      </el-select>
      <el-select v-model="days" placeholder="时间窗口" style="width: 200px">
        <el-option label="7天" :value="7" />
        <el-option label="30天" :value="30" />
      </el-select>
    </div>
    <div ref="chart" class="chart"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  data() {
    return {
      selectedType: '蔬菜',
      days: 7,
      typeList: ['蔬菜', '水果', '粮食', '油料'],
      mockData: {
        蔬菜: {
          7: [3.2, 3.5, 3.8, 4.0, 4.2, 4.3, 4.5],
          30: Array.from({length: 30}, (_, i) => 3 + i * 0.1)
        },
        水果: {
          7: [5.2, 5.5, 5.8, 6.0, 6.2, 6.3, 6.5],
          30: Array.from({length: 30}, (_, i) => 5 + i * 0.1)
        }
        // 其他类型同理
      }
    }
  },
  watch: {
    selectedType: 'drawChart',
    days: 'drawChart'
  },
  mounted() {
    this.drawChart()
  },
  methods: {
    drawChart() {
      const chart = echarts.init(this.$refs.chart)
      const data = this.mockData[this.selectedType][this.days]
      const xData = Array.from({length: this.days}, (_, i) => `第${i+1}天`)
      const option = {
        title: {
          text: '农产品近日均价',
          left: 'center',
          textStyle: { fontSize: 30 }
        },
        tooltip: { trigger: 'axis' },
        xAxis: { type: 'category', data: xData },
        yAxis: { type: 'value', name: '均价(元)' },
        series: [
          {
            name: '均价',
            type: 'line',
            data: data,
            smooth: true
          }
        ]
      }
      chart.setOption(option)
    }
  }
}
</script>
<style lang='scss' scoped>
.container {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
}

.chart {
  width: 100%;
  height: 90%;
  min-height: 300px; /* 设置最小高度，避免图表内容过少时显示不全 */
}
</style>
